<template>
	<div class="main">
		<div class="content">
			<div class="content-commodity">
				<img :src="'http://39.96.195.154:8080/upload/' + sensorsItem.sensorPicture" alt="传感器图片" />
				<div class="content-details">
					<h3 class="details-h3">{{ sensorsItem.sensorName }}</h3>
					<p class="details-price">
						<span>价格</span>
						<span>￥{{ sensorsItem.sensorPrice }}</span>
					</p>
					<div class="details-line"></div>
					<div class="details-describe">
						<h4>商品描述：</h4>
						<p>{{ sensorsItem.sensorDescription }}...</p>
					</div>
					<router-link :to="'/shopscar/'+ this.id">
						<input type="button" value="加入购物车" />
					</router-link>
				</div>
			</div>
		</div>

		<div class="comment">
			<div class="comment-header">宝贝评论</div>

			<div class="comment-box" v-if="flag">
				<div class="comment-user">
					<img src="../../images/user.jpg" alt="用户头像" />
					<p>no one</p>
				</div>
				<div class="comment-details">
					<div class="detalis-text">此商品暂时没有评论内容...</div>
					<div class="detalis-time">{{ date | dateFormate }}</div>
				</div>
			</div>

			<div class="comment-box" v-for="item in sensorsComments" :key="item.id">
				<div class="comment-user">
					<img src="../../images/user.jpg" alt />
					<p>蓝天白云</p>
				</div>
				<div class="comment-details">
					<div class="detalis-text"> {{ item.comment }} </div>
					<div class="detalis-time"> {{ item.createTime | dateFormate}} </div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import httpRequest from "../../tools/ajax.js";

	export default {
		data: function() {
			return {
				id: this.$route.params.id,
				flag: false,
				date: new Date(),
				sensorsItem: [],
				sensorsComments: []
			};
		},
		created() {
			this.getGoodsDetail();
			this.showSensorComment();
		},
		methods: {
			// 根据ID获取相应商品的信息
			getGoodsDetail() {
				var paramObj = {
					httpUrl: "http://39.96.195.154:8080/getGoodsDetail?sensorId=" + this.id + "",
					type: "get",
					data: {}
				};
				httpRequest(
					paramObj,
					respondDada => {
						respondDada = JSON.parse(respondDada);
						this.sensorsItem = respondDada.data;
					},
					function() {
						alert("网络错误");
					}
				);
			},
			// 根据ID获取相应商品的评论
			showSensorComment() {
				var paramObj = {
					httpUrl: "http://39.96.195.154:8080/showSensorComment?tranastionId=" + this.id,
					type: "get",
					data: {}
				};
				httpRequest(
					paramObj,
					respondDada => {
						respondDada = JSON.parse(respondDada);
						// console.log(respondDada);
						// console.log(respondDada.data.records);
						if (respondDada.data.records === 0) {
							this.flag = true;
						} else {
							this.sensorsComments = respondDada.data.rows;
							// console.log(this.sensorsComments);
						}
					},
					function() {
						alert("网络错误");
					}
				);
			}
		},
		filters: {
			numFilter(value) {
				// 截取当前数据到小数点后1位
				let realVal = parseFloat(value).toFixed(2);
				return realVal;
			},
			dateFormate: function(dateStr) {
				var dt = new Date(dateStr)

				var y = dt.getFullYear()
				var m = dt.getMonth() + 1
				var d = dt.getDate()

				return `${y}-${m}-${d}`
			}
		}
	};
</script>

<style lang='less' scoped>
	.content {
		margin: 25px auto;
		padding: 20px;
		width: 1000px;
		height: 390px;

		.content-commodity {
			display: flex;
			width: 960px;
			height: 390px;
			border: 1px solid #eee;

			img {
				margin: 35px 25px;
				padding: 15px 25px;
				width: 320px;
				height: 320px;
			}

			.content-details {
				margin: 35px 25px 35px 0;
				width: 570px;
				height: 320px;

				.details-h3 {
					font-size: 18px;
					margin: 10px 0;
				}

				.details-price {
					font-size: 16px;
					padding: 15px;
					background-color: #fff2e8;

					:nth-child(2) {
						margin-left: 30px;
						font-size: 24px;
						font-weight: 700;
						font-family: Tahoma, Arial, Helvetica, sans-serif;
						color: #f40;
					}
				}

				.details-line {
					margin-top: 5px;
					width: 565px;
					height: 1px;
					border-bottom: 1px dotted #d9d9d9;
				}

				.details-describe {
					margin-top: 10px;
					width: 565px;
					height: 140px;
					font-size: 16px;
					line-height: 35px;

					p {
						padding: 8px;
						width: 565px;
						height: 100px;
						font-size: 14px;
						line-height: 22px;
						border: 1px solid #eee;
					}
				}

				input {
					padding: 5px;
					font-size: 16px;
					color: white;
					border: 0;
					background-color: #f40;
					cursor: pointer;
				}
			}
		}
	}

	.comment {
		margin: 50px auto;
		padding: 20px;
		width: 1000px;
		height: 500px;

		.comment-header {
			padding: 12px 20px;
			width: 960px;
			height: 45px;
			font-size: 14px;
			letter-spacing: 3px;
			border: 1px solid #eee;
			color: #f40;
			background-color: #f6f6f6;
		}

		.comment-box {
			display: flex;
			padding: 10px;
			text-align: center;
			width: 960px;
			border-bottom: 1px solid #d9d9d9;

			img {
				width: 60px;
				height: 60px;
			}

			.comment-details {
				position: relative;
				margin-left: 20px;
				width: 900px;
				height: 100px;
				background-color: white;

				.detalis-text {
					padding: 5px;
					text-align: left;
					font-size: 14px;
					border-bottom: 1px dotted #d9d9d9;
				}

				.detalis-time {
					position: absolute;
					right: 5px;
					bottom: 3px;
				}
			}
		}
	}
</style>
